<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品特效滚动</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        list-style:none;
            box-sizing: border-box;
        }

        #box{
            width: 560px;
            height: 200px;
            margin: 100px auto;
            border: 1px solid #cccccc;
            position: relative;
            padding-top:20px;
            overflow: hidden;
        }
        #uls{
            width: 1400px;
            height: 130px;
            position: absolute;
        }
        #uls li{
            float: left;
            padding-right:10px;
        }
        #bar{
            width: 560px;
            height: 20px;
            background-color: #cccccc;
            position: absolute;
            bottom: 0;
            left:0;
        }
        #mask{
            width: 200px;
            height: 20px;
            border-radius:10px;
            background-color: orangered;
            position: absolute;
            bottom: 0;
            left:0;
        }
    </style>
</head>

<!--
	思路：1.mask滚动条要滚动起来
        1.1根据内容获取滚动条的长度：(盒子的宽度/内容的宽度)*盒子的宽度
        1.2点击mask时，mask.onmousedown要用event事件获取滚动条当前坐标beginX = （clientX-mask.offsetLeft）;
        1.2当鼠标按下时离开了mask也移动的时候，mask还是要移动（满足用户体验），这就用到了document.onmousemove,此时要重置event事件，获取滚动条最新的移动位置：moveX = clientX - beginX;
        1.3判断滚动条不能滚动出给定的滚动条长度
            最左边  moveX < 0 ==> moveX=0;
            最右边  moveX>bar.offsentWidth-mask.offsetWidth ==>  moveX=bar.offsentWidth-mask.offsetWidth
        1.4 赋值给滚动条让它动起来：mask.style.left = moveX + 'px';

       2.内容要跟着mask滚动条滚动而移动
         2.1此时移动条以及可以移动，更加公式让内容移动：
内容走的距离 = （内容的长度 - 盒子的长度） \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离
         2.2将计算出来的距离赋值给内容：uls.style.left =  - 内容走的距离 +'px';
         2.3注意是负值，因为内容走的方向和滚动条的相反

       3.鼠标抬起来的时候不动，注意此时应该是document.onmouseup事件
         3.1 清除document.onmousedown = null;
         3.2 清除document.onmousemove = null;
         3.3 document.onmouseup 和 前面的mask.onmousedown 设置return false 让鼠标移动的时候不会选中内容
         -->

<body>
    <div id="box">
        <ul id="uls">
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
            <li><img src="images/img6.jpg" alt=""></li>
            <li><img src="images/img7.jpg" alt=""></li>
            <li><img src="images/img8.jpg" alt=""></li>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>

        </ul>
        <div id="bar">
            <div id="mask"></div>
        </div>
    </div>

<script>
    window.onload = function(){
        //获取DOM对象
        var box = document.getElementById('box');
        var uls = document.getElementById('uls');
        var bar = document.getElementById('bar');
        var mask = document.getElementById('mask');

        //更加内容获取mask长度：滚动条长度 = ( 盒子的宽度 \内容的宽度) * 盒子的宽度
        mask.style.width = (box.offsetWidth/uls.offsetWidth)*box.offsetWidth +'px';
        mask.onmousedown = function (event) {
            //获取兼容的event事件
            var myEvent = event || window.event;
            //设置滚动条的初始位置
            var begin = myEvent.clientX - mask.offsetLeft;

            //放mske移动时可以离开mask在文档中移动
            document.onmousemove = function (event) {

                var myEvent = event || window.event;
                //设置滚动条的移动的位置
                var moveX = myEvent.clientX - begin;
                //判断移动条不能出界
                if(moveX<0){
                    moveX = 0;
                }else if(moveX>=bar.offsetWidth-mask.offsetWidth){
                    moveX=bar.offsetWidth-mask.offsetWidth
                }
                //让移动条移动起来
                mask.style.left = moveX +'px';

                //让图片和移动条同时移动
                //计算公式：内容走的距离 = （内容的长度 - 盒子的长度） /(盒子长度 - 滚动条的长度) * 滚动条走的距离
                uls.style.left = -(uls.offsetWidth - box.offsetWidth)/(box.offsetWidth-mask.offsetWidth)*moveX +'px';
            };
            return false;
        };

        //当属于在文档内抬起来的时候，清除onmousedown 和onmousedmove
        document.onmouseup = function () {
            document.onmousedown = null;
            document.onmousemove = null;
            //同时在onmousedown 和 onmouseup设置可以让移动时不会选择图片
            return false;
        }
    }
</script>
</body>
</html>